<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>Title</title>
    <!-- 定制版 ionic 样式 -->
    <!--<link rel="stylesheet" href="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.css">-->
    <link rel="stylesheet" href="vendor/vonic.min.css">


</head>
<body>
<von-app></von-app>

<!-- 依赖库 axios/vue/vue-router -->
<!--<script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>-->
<script src="vendor/axios.min.js"></script>
<!--<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>-->
<script src="vendor/vue.min.js"></script>
<!--<script src="https://unpkg.com/vue-router@2.2.1/dist/vue-router.min.js"></script>-->
<script src="vendor/vue-router.min.js"></script>

<!-- vonic 核心文件 -->
<!--<script src="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.js"></script>-->
<script src="vendor/vonic.min.js"></script>

<script>


    // 页面组件
    const Index = {
        template: `
            <div class="page has-navbar" v-nav="{ title: 'Home' }">
              <div class="page-content text-center">
                <h2 class="padding" v-text="msg"></h2>

                <router-link class="button button-assertive" to="/about">
                  <i class="ion-information-circled"></i> About
                </router-link>
              </div>
            </div>
  `,
        data() {
            return {
                msg: 'Hello! Vonic.'
            }
        }
    }

    const About = {
        template: `
    <div class="page has-navbar" v-nav="{ title: 'About', showBackButton: true }">
      <div class="page-content text-center">
        <h2 class="padding">Nothing here.</h2>
      </div>
    </div>
  `
    }


    // 路由定义
    const routes = [
        {path: '/', component: Index},
        {path: '/about', component: About}
    ];

    // 启动应用
    Vue.use(Vonic.app, {
        routes: routes
    });


</script>

</body>
</html>
